<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>角色显示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../layuiadmin/layui/xadmin.js"></script>
    <script type="text/javascript" src="../../layuiadmin/js/system/jquery.min.js"></script>
    <script src="../../layuiadmin/js/system/jquery.cookie.js"></script>

</head>
<body>
<div class="layui-form" id="form">
    <div class="demoTable">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <div class="layui-form-item">
        <div class="layui-tab-item layui-show">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="roleName" id="roleName"  placeholder="角色名称" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" data-type="reload" type="button" id="go">搜索</button>
            <button class="layui-btn" type="button" id="insRole">添加角色</button>
        </div>
    </div>
</div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--用户表-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >查看/修改权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="del">删除</a>
</script>
</div>
<script>
    function createrFormat(o){
        return o;
    }
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,height:510
            ,width:1290
            ,url:'http://localhost:8080/user/rolelist'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left',}
                ,{field:'roleId', title:'ID', align:'center',  width:190, fixed: 'left', unresize: true, sort: true}
                ,{field:'roleName', title:'角色名称', align:'center', width:250,}
                ,{field:'roleDesc', title:'角色描述', align:'center', width:400,}
                // ,{field:'roleStatus', title:'角色状态', align:'center', width:200}
                ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo', width:420}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 1 页
                ,limit:5 //一页显示多少条
                ,limits:[2,5,10]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码

            }
            ,id:'roletable'
        });
        //监听表格复选框选择
        table.on('checkbox(test)', function(obj){
            console.log(obj);
        });


        var $=layui.$,active={
            reload:function () {
                var roleName=$("#roleName");
                //执行重载
                table.reload('roletable',{
                    page:{
                        curr:1//重新从第一页开始
                    }
                    , where:{
                        roleName:roleName.val()
                    }
                },'data');
            }
        }

        $('.demoTable .layui-btn').on('click',function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        })
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var tableRoleid = obj.data.roleId;
            $.cookie("tableRoleid", tableRoleid);
            if(obj.event === 'del'){
                layer.confirm('真的删除这个角色么', function(index){
                    var tableRoleid = obj.data.roleId;
                    obj.del();
                    layer.close(index);
                    //向服务端发送删除指令，获取后端
                    $.ajax({
                        type: 'get',
                        url:"http://localhost:8080/aut/delRole",
                    data: {
                        roleId: data.roleId,  //此处是根据id查询此id是否被删除，故将id传向后端
                    },
                    contentType: 'application/json',
                        success: function (data) {
                        layer.msg('删除成功啦', { icon: 1 }, { time: 2000 });
                    },
                    error: function (data) {
                        layer.msg('连接网络失败，请检查网络设置或联系管理员', { icon: 2 }, { time: 2000 });
                    }
                });
                });
            } else if(obj.event === 'edit') {
                window.location.href = "authority.html";
            }
        });
    });
</script>
<script>
    $(function () {
       $("#insRole").click(function () {
           window.location.href="insRole.html";
       })
    })
</script>
</body>
</html>